<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>搜索</title>
    <style media="screen">
      *{
        padding: 0;
        margin: 0;
      }
      ul{
        list-style: none;
        margin-left: 500px;
      }
      ul li{
        margin-top: 10px;
        height: 10px;
        width: 200px;
        padding: 10px 0 10px 0;
        display: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <div id="box"><input type="text" name="seach" id="seach" >
      <input type="submit" name="submit" id="submit" onclick ="begin()" value=""></div>
      <li id="li0" style="background:#FF83FA"></li>
      <li id="li1" style="background:#FF7F24"></li>
      <li id="li2" style="background:#DB7093"></li>
      <li id="li3" style="background:#B23AEE"></li>
      <li id="li4" style="background:#8B475D"></li>
      <li id="li5" style="background:#778899"></li>

    </ul>

  </body>
  <script type="text/javascript">
      var json="0";
      //var seach =document.getElementById('seach').value;
    var submit =document.getElementById('submit');


//监听键盘事件
     document.onkeyup =function(){
       //获取当前keyCode值
    var keycode = event.keyCode;
    if (keycode==32||keycode==13||keycode==49||keycode==50||keycode==51||keycode==52||keycode==53||keycode==54||keycode==55||keycode==56||keycode==57||keycode==48) {



      if (window.XMLHttpRequest) {
          var request = new XMLHttpRequest();
      } else {
          var request = new ActiveXObject("Microsoft.XMLHTTP");
      }

    var url ="2.php?content="+document.getElementById('seach').value;

      request.open("GET",url,true);
      request.send(null);
      request.onreadystatechange = function() {

          if (request.readyState == 4 && request.status == 200) {
            // content.innerHTML = request.responseText;
            // 获取返回的json串
            json =request.responseText;
				// console.log(json);
        //判断返回的json串是否为空
              if(json!=""){
                  star();
              }

          };

      }
//监听回车键
  }else if(keycode==8){
    for (var i = 0; i < 6; i++) {
      var a =document.getElementById('li'+i);
      // a.style.display ="none";
      a.innerHTML ="";
    }
  }

}

//为什么要封装在一个函数，是因为json，如果不封装一个函数，json串在没有返回数据的时候就执行下面代码了
  function star(){
    if (json=="没有查询到") {
      console.log("没有查询到");
    }else {
      var object =JSON.parse(json);

    for (var i = 0; i < object.length; i++) {
      var a =document.getElementById('li'+i);
      a.style.display ="block";
      a.innerHTML = object[i].title;
      // console.log(a.innerHTML);
      // 给每一个li标签增加点击事件
      a.onclick = function(){
          document.getElementById('seach').value = this.innerHTML;
      }
        if(i>4){
        break;
        }
    }
    }





 }



function begin(){
  if (window.XMLHttpRequest) {
      var request = new XMLHttpRequest();
  } else {
      var request = new ActiveXObject("Microsoft.XMLHTTP");
  }

var url ="2.php?content="+document.getElementById('seach').value;

  request.open("GET",url,true);
  request.send(null);
  request.onreadystatechange = function() {

      if (request.readyState == 4 && request.status == 200) {
        // content.innerHTML = request.responseText;
        json =request.responseText;
    // console.log(json);
          if(json!=""){
              str();
          }

      };

  }


}

function str(){
  if (json=="没有查询到") {
    alert("没有查询到");
  }else {
    var object =JSON.parse(json);
    console.log(object);
  for (var i = 0; i < object.length; i++) {
    //获取要跳转的链接
    var send = object[i].url;
      // window.location.href= send;
  }
  }


}






  </script>
</html>
